<template>
  <header class="header" style="top: 0">
    <div class="toolbar">
      <a href="/" class="logo">
        <img class="logo" src="@/assets/logo.png" alt="啦啦健身" @click="router.push('/')">
        <h4>啦啦健身</h4>
      </a>
      <div class="menu-container">
        <el-menu
            ellipsis
            :default-active="props.activeName"
            mode="horizontal"
            :popper-offset="16"
            class="toolbar-menu"
            :router="true"
        >
          <el-menu-item index="/">首   页</el-menu-item>
          <el-menu-item index="/course">健身课程</el-menu-item>
          <el-menu-item index="/coach">教练团队</el-menu-item>
          <el-menu-item index="/news">新闻资讯</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item v-if="isLogin" index="/profile">个人中心</el-menu-item>
        </el-menu>
      </div>
      <div class="toolbar-right" v-if="isLogin">
          <el-badge :is-dot="hasMessage" class="item">
            <a :href="'/profile/myMessage?uid='+user.id+'&nr='+noReadMsg">消息</a>
          </el-badge>
          <div>
            <el-avatar size="large" :src="user.avatar"></el-avatar>
          </div>
          <div style="color: #9bcdff;font-size: 20px;font-weight: bold">{{username}}</div>
          <span style="color: #818181;cursor:pointer;" @click="signOut">退出登录</span>
      </div>
      <div v-else  class="toolbar-right">
          <a href="/login">登录</a>
          <a href="/register">注册</a>
      </div>
    </div>
  </header>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {inject, onMounted, ref} from "vue";
import storage from '@/utils/storage'
import {logout} from "@/api/login.ts";
import {noReadMessageCount} from "@/api/message.ts";

const router = useRouter()
const props = defineProps({
  activeName: {
    type: String,
    default: '/'
  }
})
const isLogin = ref(false)

const user = ref()
const userId = ref()
const username = ref()
const hasMessage = ref(false)
const noReadMsg = ref(0)
const signOut = () => {
  storage.clear()
  localStorage.removeItem("token");
  logout().then(()=>{
    isLogin.value = false;
  })
  router.push('/login')
}

onMounted(()=>{
  let tmp = JSON.parse(storage.getItem("userInfo"))
  if(tmp) {
    user.value = JSON.parse(storage.getItem("userInfo"))
    userId.value = user.value.id
    username.value = user.value.username
    isLogin.value = storage.getItem('userInfo') != null
        && JSON.parse(storage.getItem('userInfo')) && JSON.parse(storage.getItem('userInfo')).id != null
    if(isLogin){
      noReadMessageCount({memberId: userId.value}).then((resp)=>{
        noReadMsg.value = resp.data
        hasMessage.value = resp.data > 0
      })
    }
  }
})
</script>

<style scoped>
  .header{
    z-index: 100;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 61px;
    width: 100%;
    border-bottom: 1px inset #dad8d8;
    opacity: 0.9;
  }
  .toolbar{
    display: flex;
    width: 80%;
    height: 100%;
  }
  .toolbar a:hover{
    background-color: #ecf5ff;
  }
  .logo{
    display: flex;
    margin-left: 50px;
    align-items: center;
    padding-right: 10px;
  }
  .logo h4{
    color: #5e5c5c;
    font-weight: bold;
    line-height: 61px;
  }
  .menu-container{
    min-width: 400px;
    display: flex;
    width: 70%;
    text-align: center;
    justify-content: center;
  }
  .toolbar-right{
    display: flex;
    flex-grow: 2;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
  }
  .toolbar-right a{
    color: #353333;
    text-decoration: none;
    cursor: pointer;
  }
  .toolbar-menu{
    display: flex;
    /*justify-content: space-between;*/
    border: none;
    width: 70%;
  }
  .toolbar-menu li{
    font-size: 17px;
    line-height: 61px;
  }
</style>